<template>
	<app-layout>
		<app-banner></app-banner>
		<view class="active-page">
			<view class="active-title">
				<app-title text="活动列表" :width="64"></app-title>
				<button class="avtive-mine" type="default" @click="$tool.navigateTo('/pages/active/mine')">预约列表>></button>
			</view>
			<view class="active-list">
				<view class="item" v-for="item in listData" :key="item.id" @click="openPopup(item)">
					<view class="title">"{{item.title}}"</view>
					<view class="right"></view>
					<view class="infos">
						<view class="info">
							<view class="label">购买数量</view>
							<view class="value">{{item.maxTotal}}</view>
						</view>
						<view class="info">
							<view class="label">开始时间</view>
							<view class="value">{{dateFormat(item.startTime, 'Y年m月d日 H时i分')}}</view>
						</view>
						<view class="info">
							<view class="label">结束时间</view>
							<view class="value">{{dateFormat(item.endTime, 'Y年m月d日 H时i分')}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="active-popup">
				<view class="popup-title">活动预约</view>
				<view class="popup-item">
					<view class="item-circle"></view>
					<view class="item-label">活动标题</view>
					<view class="item-value">{{selectActive.title}}</view>
				</view>
				<view class="popup-item">
					<view class="item-circle"></view>
					<view class="item-label">最大购买数</view>
					<view class="item-value">{{selectActive.maxTotal}}</view>
				</view>
				<view class="popup-item">
					<view class="item-circle"></view>
					<view class="item-label">活动开始时间</view>
					<view class="item-value">{{dateFormat(selectActive.startTime, 'Y年m月d日 H时i分')}}</view>
				</view>
				<view class="popup-item">
					<view class="item-circle"></view>
					<view class="item-label">活动结束时间</view>
					<view class="item-value">{{dateFormat(selectActive.endTime, 'Y年m月d日 H时i分')}}</view>
				</view>
				<button class="popup-btn" type="default" @click="onOrderClick"
					:loading="activeBtnLoading">{{activeBtnLoading?'':'立即预约'}}</button>
			</view>
		</uni-popup>
	</app-layout>
</template>

<script>
	import {
		dateFormat
	} from '../../utils/utils.js'
	import {
		getActivityPage,
		activityReserve
	} from '../../request/active-api.js'
	export default {
		data() {
			return {
				dateFormat,
				// 主题数组
				listData: [],
				// 列表查询参数
				params: {
					condition: "",
					pageNum: 0,
					pageSize: 8
				},
				// 没有更多了
				isNoMore: false,
				// 加载状态
				queryStatus: 'more',
				// 各状态文字说明
				contentText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				// 选中活动数据
				selectActive: {},
				// 预约按钮loading
				activeBtnLoading: false,
			}
		},
		created() {
			this.onLoadListData()
		},
		methods: {
			// 打开 重置弹框
			openPopup(data) {
				this.selectActive = data
				console.log(data)
				this.$refs.popup.open('bottom')
			},

			// 关闭 重置弹框
			closePopup() {
				this.$refs.popup.close()
			},

			// 跳转 我的预约列表
			goToMineActive() {
				uni.navigateTo({
					url: '../active-mine/active-mine',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},

			// 点击加载更多
			onClickLoadMore() {
				if (!this.isNoMore) {
					this.onLoadListData()
				}
			},

			// 立即预约
			async onOrderClick() {
				try {
					let {
						code,
						message
					} = await activityReserve(this.selectActive.id)
					if (code === 200) {
						uni.showToast({
							title: '预约成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
					this.closePopup()
				} catch (err) {
					this.$tool.showErr(err)
				}
			},

			// 加载 数据
			async onLoadListData() {
				this.queryStatus = 'loading'
				this.params.pageNum += 1
				try {
					let {
						code,
						message,
						data
					} = await getActivityPage(this.params)
					if (code === 200) {
						this.isNoMore = true
						this.listData.push(...data.list)
						this.queryStatus = 'noMore'
					} else {
						this.queryStatus = 'more'
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.queryStatus = 'more'
					this.$tool.showErr(err)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.active-page {
		width: 100%;
		margin-bottom: 40rpx;
	}

	.active-title {
		width: 100%;
		height: 64rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.avtive-mine {
			margin: 0;
			width: 168rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: #151822;
			box-shadow: -10px -10px 20px 0px rgba(70, 75, 86, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 6px;
			opacity: 0.5;
			border: 1px solid #5B6065;
			font-size: 10px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #E1E3E7;
			line-height: 38rpx;
		}
	}

	.active-list {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.item {
			width: 686rpx;
			height: 334rpx;
			padding: 40rpx;
			margin-bottom: 30rpx;
			background: $active-back-url no-repeat;
			background-size: 100% 100%;
			background-position: center center;
			position: relative;

			.right {
				width: 40rpx;
				height: 40rpx;
				background: $common-right-url no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				position: absolute;
				top: 60rpx;
				right: 40rpx;
			}

			.title {
				line-height: 40rpx;
				text-align: center;
				font-size: 14px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #9D9D9D;
				margin-bottom: 20rpx;
			}

			.infos {
				width: 610rpx;
				opacity: 0.7;
				border-top: 4rpx solid #979797;

				.info {
					width: 100%;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.label {
						width: 120rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #979797;
					}

					.value {
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #979797;
					}
				}
			}

		}
	}

	.active-popup {
		width: 100%;
		height: 528rpx;
		padding: 40rpx;
		background: $login-resetbakc-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;

		.popup-title {
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #BFCBCD;
			line-height: 22px;
			text-align: center;
		}

		.popup-item {
			width: 100%;
			height: 64rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.item-circle {
				width: 66rpx;
				height: 66rpx;
				background: linear-gradient(270deg, rgba(141, 141, 141, 0) 0%, #545454 100%);
				opacity: 0.38;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 0rpx;
				transform: translateY(-50%);
			}

			.item-label {
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #BFCBCD;
				padding-left: 20rpx;
			}

			.item-value {
				flex: 1;
				text-align: right;
				font-size: 12px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #7B7B7B;
			}
		}

		.popup-btn {
			width: 684rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #121212;
			box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 22px;
			border: 1px solid #FFBD47;
			font-size: 14px;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFBD47;
		}
	}
</style>
